<template>
	<view style="padding: 30rpx">
		<view class="vip-card">
			<view class="flex-between">
				<view class="vip-title">乘凉VIP</view>
				<view class="vip-grade flex">
					再获得200经验值，升级Lv2
					<u-icon name="arrow-right-double"></u-icon>
				</view>
			</view>
			<view class="flex p-c-20">
				<view class="u-f-ss">￥
					<span class="u-f-sxl">100</span>
				</view>
				<view class="p-r-15 ">|</view>
				<view class="u-f-sx u-f-sm">积分100</view>
			</view>
		</view>
		<view>
			<view class="child-card flex-column-center">
				<view class="spu-item">
					<view class="fee flex-center">
						￥<span class="u-f-sxl">200</span>
					</view>
					<view class="u-f-sm text-center" style="color: #818181;">送
						￥<span class="u-f-xl">200</span>
					</view>
					<view class="recharge-btn">充值</view>
				</view>
			</view>
		</view>
	</view>
	<view class="child-menu">
		<DefineTmp v-slot="{item}">
			<view class="flex-between u-f-sx menu-child">
				<view>{{ item.name }}</view>
				<view @click="toPath(item.path)">
					1
				</view>
			</view>
		</DefineTmp>
		<UseTmp v-for="(item,index) of operArr" :key="index" :item="item"></UseTmp>
	</view>
</template>
<script lang="ts" setup>
	import { createTemplate } from "@/util/template/DefineTemplate";
	import { onMounted, reactive, ref } from "vue";
	import { toPath } from "@/util/router/router";

	const { DefineTmp, UseTmp } = createTemplate()
	const state = ref({
		isShow: false,
		isOpen: false,
	})
	const operArr = reactive([
		{
			name: '测试1',
			path: '#',
		},
		{
			name: '测试1',
			path: '#',
		},
		{
			name: '测试1',
			path: '#',
		},
		{
			name: '测试1',
			path: '#',
		},
	])

	function toggleDrawer() {
		state.value.isOpen = !state.value.isOpen
	}
</script>

<style scoped lang="scss">
	@import "@/static/css/index.css";

	$radius: 20rpx;

	@mixin card {
		background: var(--bg-color);
		color: #888;
	}

	.vip-card {
		background-image: url("@/static/img/vip.png");
		background-size: cover;
		padding: 20rpx;
		color: #a6a6a6;
		border-radius: 10rpx;
		box-shadow: 0 0 20rpx var(--shadow-color);

		.vip-title {
			font-size: 28rpx;
			font-weight: 600;
			padding: 10rpx 0;
		}

		.vip-grade {
			font-size: 22rpx;
			font-weight: 500;
			color: #cecdcd;
		}
	}

	.spu-item {
		width: 100%;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    align-items: center;
	}

	.child-card {
		@include card;
		border-radius: $radius;
		margin-top: 20px;
		box-shadow: 0 0px 10px var(--shadow-color);
	}

	.child-menu {
		border-radius: $radius;
		@include card;
		padding: $radius;
		margin-top: 30rpx;
		background: var(--bg-color);
		box-shadow: 0 0 20rpx var(--shadow-color);
	}

	.fee {
		color: var(--text-color);
		font-weight: 600;
		font-size: 24rpx;
	}

	.recharge-btn {
		background: #ff9306;
		color: #fff;
		text-align: center;
		font-size: 26rpx;
		padding: 5rpx 10rpx;
		width: 120rpx;
		border-radius: 40rpx;
    margin-left: auto;
	}

	.menu-child {
		padding: 20rpx 4px;
		border-radius: 5px;
		border-bottom: 1rpx solid var(--border-color);
		color: var(--text-color);

		&:hover {
			background: var(--bg-hover);
			color: var(--text-hover);
		}
	}
</style>